<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <!--引入插槽 -->
      <slot></slot>
    </div>
    <!--小图标 -->
    <div class="dots">
      <!--如何改变currentIndex的值 -->
      <span class="dot" :class="{'active' : currentIndex === index }" v-for="(item,index) in dots" :key="index"></span>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll';
import {addClass} from '@/util/dom.js';

export default {
  props: {
    loop: {
      type: Boolean,
      default: true // 是否轮播 
    },
    autoPlay: {
      type: Boolean,
      default: true // 自动轮播
    }
  },
  data() {
    return {
      dots: [],
      currentIndex:0 // 自动滚动效果
    };
  },
  mounted() {
    //vue2.0中 使用mounted代替ready,但不能保证钩子函数中滴this.$el在document中，为此引入vue.$nextTick vue_seller项目中seller.vue中同样的引用
    setTimeout(() => {
      // 设置宽度
      this._setSliderWidth();
      // 初始化dots
      this.__initDots();
      this._initSlider();
      //初始化自动滚动
      if (this.autoPlay) {
        this._play()
      }
    }, 20);// 科学方法延迟
    
    //当窗口变化的时候,轮播需要重新加载
    window.addEventListener('resize', () => {
        if (!this.slider) {
          return
        }
        this._setSliderWidth(true)
        this.slider.refresh()
    });
  },
  methods: {
    //1.设置横向滚动的宽度
    _setSliderWidth(isResize) {
        console.log('this.$refs.sliderGroup');
        console.log(this.$refs.sliderGroup);
        this.children = this.$refs.sliderGroup.children;
        console.log('children对象');
        console.log(this.children);
        let width = 0;
        let sliderWidth = this.$refs.slider.clientWidth;
        for (let i = 0; i < this.children.length; i++) {
          let child = this.children[i];
          addClass(child, 'slider-item');

          child.style.width = sliderWidth + 'px';
          width += sliderWidth;
        }
        if (this.loop && !isResize) {
          width += 2 * sliderWidth;
        }
        this.$refs.sliderGroup.style.width = width + 'px';
    },
    _initSlider() {
      this.slider = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: true,
        snapLoop: this.loop, // 无缝滚动
        snapThreshold: 0.3,
        snapSpeed: 400
      });

      //绑定事件
      this.slider.on('scrollEnd', () => {
        let pageIndex = this.slider.getCurrentPage().pageX;
        console.log('执行scrollEnd中的pageIndex值  ' + pageIndex);
        if(this.loop){
          console.log();
          pageIndex =  pageIndex - 1;
        }
          this.currentIndex = pageIndex;

          //自动播放--不然只进行初始化第一次滚动
          if(this.autoPlay){
            this._play();
          }
      });

      this.slider.on('beforeScrollStart', () => {
        if (this.autoPlay) {
          clearTimeout(this.timer);
        }
      });
     
    },
    // 长度为5的数组
    __initDots() {
      console.log('_initDots初始化数组的长度   ' + this.children.length);
      this.dots = new Array(this.children.length);
    },

    // 自动播放
    _play(){
      console.log('初始化执行currentIndex的值' + this.currentIndex );
      let pageIndex = this.currentIndex + 1;
      console.log('第一次执行pageIndex的值 ' + pageIndex );
        if (this.loop) {
          pageIndex += 1 ;
        }
        console.log('自动播放时pageIndex ' + pageIndex + '  自动播放时currentIndex  ' + this.currentIndex );
        this.timer = setTimeout(() => {
          this.slider.goToPage(pageIndex, 0, 400)
        },2000);
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.slider {
  min-height: 1px;
  .slider-group {
    position: relative;
    overflow: hidden;
    white-space: nowrap;//折叠
    .slider-item {
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      a {
          display: block;
          width: 100%;
          overflow: hidden;
          text-decoration: none;
      }
      img {
          display: block;
          width: 100%;
      }
    }
  }
  .dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 12px;
    text-align: center;
    font-size: 0;//去掉span与span直接的空占位符
    .dot {
      display: inline-block;
      margin: 0 4px;//左右
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      &.active {
        border-radius: 5px;
        background: rgba(240, 20, 20, 0.8);
      }
    }
  }
}
</style>
